<template>
  <div class="app-page">
    <org-tree
      class="orgTree"
      title="组织机构"
      :tree-data="orgTreeData"
      :mouse-button="false"
      :loading="$loadingPlugin.getOrgTreeData"
      @currentChange="orgChange"
    />
    <div class="right">
      <el-table-form ref="dataForm" class="form" :model="query" inline>
        <el-form-item label="现金留存预警:" :table-form-merge="2.1">
          <el-input-number v-model.trim="query.cashTopLimit" :controls="false" :min="-999999999999999" :max="10000000000000000" :precision="0" clearable style="width: 170px;" />
          ~
          <el-input-number v-model.trim="query.cashTopLimitEnd" :controls="false" :min="-999999999999999" :max="10000000000000000" :precision="0" clearable style="width: 170px;" />
        </el-form-item>
        <el-form-item label="月结差额减免上限:" :table-form-merge="2.1">
          <el-input-number v-model.trim="query.monthlyTopLimit" :controls="false" :min="-999999999999999" :max="10000000000000000" :precision="0" clearable style="width: 170px;" />
          ~
          <el-input-number v-model.trim="query.monthlyTopLimitEnd" :controls="false" :min="-999999999999999" :max="10000000000000000" :precision="0" clearable style="width: 170px;" />
        </el-form-item>
        <template v-slot:btns>
          <el-button v-permission="1" type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </template>
      </el-table-form>
      <lb-table
        ref="lbTable"
        v-el-height-adaptive-table="{bottomOffset:10}"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        pagination
        :total="tableData.total"
        :immediate-fetch="false"
        custom-column
        @fetch="fetchData"
      />
    </div>
    <update ref="update" :tree-data="orgTreeData" :org-list="orgList" />
  </div>
</template>

<script>
  import { queryMap, queryOrgSuperviseSettingList } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { formatColumnMap } from '@/utils'
  import OrgTree from '@/views/components/OrgTree'
  import Update from './components/Update'

  export default {
    name: 'index',
    components: {
      OrgTree, Update
    },
    data() {
      return {
        currentOrg: null,
        orgTreeData: [],
        orgTypeMap: [],
        query: {
          cashTopLimit: undefined,
          cashTopLimitEnd: undefined,
          monthlyTopLimit: undefined,
          monthlyTopLimitEnd: undefined
        },
        tableData: {
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'orgName',
              label: '机构名称'
            },
            {
              prop: 'orgType',
              label: '机构类型',
              render: (h, { row }) => <span>{ row.orgType && formatColumnMap(this.orgTypeMap, 'value', row.orgType, 'desc') }</span>
            },
            {
              prop: 'cashTopLimit',
              align: 'right',
              label: '现金留存预警(元)'
            },
            {
              prop: 'monthlyTopLimit',
              align: 'right',
              label: '月结差额减免上限(元)'
            },
            {
              label: '操作',
              width: 50,
              fixed: 'right',
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link v-permission='3' size='mini' underline={false} onClick={() => this.update(row, $index)}>
                      编辑
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    created() {
      this.queryOptionsMap()
      this.getOrgTreeData()
    },
    methods: {
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          ...this._getQuery(this.query),
          orgSNNo: this.currentOrg.orgSNNo,
          currentPage,
          pageSize
        }
        const res = await queryOrgSuperviseSettingList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 查询枚举
      async queryOptionsMap() {
        const res = await mergeAsyncFunc(queryMap, { enumName: 'OrgType' })
        this.orgTypeMap = res.data // 机构类型
      },
      // 获取组织机构数据
      async getOrgTreeData() {
        const data = this.orgList.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.orgTreeData = getTreeData(data)
      },
      // 选择组织机构变化
      orgChange(current) {
        this.currentOrg = current
        if (this.currentOrg) this.$refs.lbTable.fetch()
      },
      async update(row) {
        await this.$refs.update.open(row)
        this.$refs.lbTable.fetch()
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  height: calc(100vh - 175px);
  padding: 0;
  .right {
    width: calc(100% - 270px);
    margin-left: 10px;
  }
  .form {
    /deep/.el-input-number .el-input {
      //width: 100px;
    }
    /deep/.el-input-number--small {
      width: 100px;
    }
  }
}
</style>
